import styled from 'styled-components';
import { colors, spacing, borderRadius, boxShadow, typography } from './variables';

// 卡片组件
export const Card = styled.div`
  background: ${colors.backgroundCard};
  border-radius: ${borderRadius.lg};
  padding: ${spacing.lg};
  box-shadow: ${boxShadow.md};
  border: 1px solid ${colors.border};
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: ${boxShadow.lg};
  }
`;

// 按钮组件
export const Button = styled.button`
  background: ${props => props.variant === 'primary' ? colors.gradientGold : 'transparent'};
  color: ${props => props.variant === 'primary' ? colors.background : colors.primary};
  border: ${props => props.variant === 'outline' ? `1px solid ${colors.primary}` : 'none'};
  border-radius: ${borderRadius.md};
  padding: ${spacing.md} ${spacing.xl};
  font-size: ${typography.fontSize.base};
  font-weight: ${typography.fontWeight.medium};
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: ${spacing.sm};

  &:hover {
    opacity: 0.9;
    transform: scale(1.05);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  ${props => props.size === 'sm' && `
    padding: ${spacing.sm} ${spacing.md};
    font-size: ${typography.fontSize.sm};
  `}

  ${props => props.size === 'lg' && `
    padding: ${spacing.lg} ${spacing.xl};
    font-size: ${typography.fontSize.lg};
  `}
`;

// 输入框组件
export const Input = styled.input`
  background: ${colors.backgroundSecondary};
  border: 1px solid ${colors.border};
  border-radius: ${borderRadius.md};
  padding: ${spacing.md};
  color: ${colors.textPrimary};
  font-size: ${typography.fontSize.base};
  width: 100%;

  &:focus {
    outline: none;
    border-color: ${colors.primary};
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  }

  &::placeholder {
    color: ${colors.textSecondary};
  }
`;

// 文本区域组件
export const TextArea = styled.textarea`
  background: ${colors.backgroundSecondary};
  border: 1px solid ${colors.border};
  border-radius: ${borderRadius.md};
  padding: ${spacing.md};
  color: ${colors.textPrimary};
  font-size: ${typography.fontSize.base};
  width: 100%;
  min-height: 120px;
  resize: vertical;

  &:focus {
    outline: none;
    border-color: ${colors.primary};
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  }

  &::placeholder {
    color: ${colors.textSecondary};
  }
`;

// 标题组件
export const Title = styled.h1`
  font-size: ${props => props.size === 'lg' ? typography.fontSize['3xl'] : 
                    props.size === 'md' ? typography.fontSize['2xl'] : 
                    typography.fontSize.xl};
  font-weight: ${typography.fontWeight.bold};
  color: ${colors.textPrimary};
  margin-bottom: ${spacing.md};
  text-align: ${props => props.center ? 'center' : 'left'};

  ${props => props.gradient && `
    background: ${colors.gradientGold};
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  `}
  
  ${props => props.center && `
    text-align: center;
  `}
`;

// 段落组件
export const Paragraph = styled.p`
  font-size: ${typography.fontSize.base};
  color: ${props => props.secondary ? colors.textSecondary : colors.textPrimary};
  margin-bottom: ${spacing.md};
  line-height: ${typography.lineHeight.relaxed};
  text-align: ${props => props.center ? 'center' : 'left'};
  
  ${props => props.center && `
    text-align: center;
  `}
`;

// 容器组件
export const Container = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 ${spacing.md};
  width: 100%;
`;

// 网格布局组件
export const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(${props => props.columns || 1}, 1fr);
  gap: ${props => props.gap || spacing.lg};

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
`;

// Flex容器组件
export const Flex = styled.div`
  display: flex;
  flex-direction: ${props => props.direction || 'row'};
  align-items: ${props => props.align || 'stretch'};
  justify-content: ${props => props.justify || 'flex-start'};
  gap: ${props => props.gap || spacing.md};
  flex-wrap: ${props => props.wrap ? 'wrap' : 'nowrap'};

  @media (max-width: 768px) {
    flex-direction: ${props => props.mobileDirection || props.direction || 'column'};
  }
`;